<template>
	<view>
		<scroll-view :scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="order_container">
				<view class="content w100p mb15">
					<view class="d-flex flex-column j-sb content_item">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">订单基本信息</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">预约编号</view>
							<view class="value_item">{{orderDetailData.reserveCode || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">所属客户</view>
							<view class="value_item">{{orderDetailData.customerName || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">预约时间</view>
							<view class="value_item">{{orderDetailData.reserveDate || praseStrEmpty}}</view>
						</view>
					</view>
				</view>

				<view class="center mb15">
					<view class="center_box">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">订单商品信息</view>
						</view>
						<view>
							<view class="center_content d-flex w100p mb15 pb10">
								<view>
									<u--image :src="orderDetailData.reservePicUrl" width="160rpx" height="160rpx"></u--image>
								</view>
								<view class="d-flex flex-column j-sb ml10" style="width:520rpx">
									<view class="pro_name">{{orderDetailData.reserveProductName}}</view>
									<view class="d-flex a-center j-sb">
										<view class="pro_name">￥{{orderDetailData.reserveProductPrice}}</view>
										<view class="pro_amout">x{{orderDetailData.reserveProductStock}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pay" v-if="orderDetailData.isReply =='0'">
					<view class="pay_box d-flex a-center j-sa">
						<u-button color="#38D19A" text="回复" @click="reply()"></u-button>
					</view>
				</view>

				<view class="address" v-else>
					<view class="d-flex flex-column j-sb address_box">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">回复信息</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">回复时间</view>
							<view class="value_item">{{orderDetailData.replyDate}}</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">回复内容</view>
							<view class="value_item">{{orderDetailData.replyDesc}}</view>
						</view>
					</view>
				</view>

				<u-modal :show="replyShow" title="回复" :showCancelButton="true" @confirm="closeReply"
					@cancel="replyShow = false">
					<view class="slot-content w100p h100p">
						<u--textarea v-model="replyDesc" placeholder="请输入内容"></u--textarea>
					</view>
				</u-modal>

				<u-toast ref="uToast" duration="1000"></u-toast>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		queryReserveOrderDetailPageByPlatformsApp,
		updateReserveOrderDetailByPlatformsApp
	} from "@/api/index.js"

	export default {
		onLoad(opt) {
			if (opt.orderCode) {
				this.orderCode = opt.orderCode
			}
		},
		onShow() {
			uni.setStorageSync('isReload', '1')
			this.queryData()
		},
		data() {
			return {
				orderCode: "",
				orderDetailData: {},
				userInfo: uni.getStorageSync('userInfo'),
				goods_info: {},
				replyShow: false,
				replyDesc: ""
			}
		},
		methods: {
			queryData() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				queryReserveOrderDetailPageByPlatformsApp({
					orderCode: that.orderCode,
				}).then(res => {
					that.orderDetailData = res.object
					that.orderDetailData.reservePicUrl = that.orderDetailData.reservePicUrl.split("&")[0]
					uni.hideLoading()
				})
			},

			reply() {
				this.replyShow = true
			},

			closeReply() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});

			
				updateReserveOrderDetailByPlatformsApp({
					orderCode: that.orderCode,
					replyDesc: that.replyDesc
				}).then(res => {
					uni.hideLoading()
					that.replyShow = false
					that.queryData()
					that.$refs.uToast.show({
						type: "success",
						duration: "1000",
						message: res.message,
						complete() {
							
						}
					})
				})
			},
		},
	};
</script>

<style lang="scss" scopeds>
	page {
		background-color: #f1f3f5;
	}

	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.order_container {
		box-sizing: border-box;
		padding: 30rpx 28rpx;
		min-height: 100vh;
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.title {
			color: #333333;
			font-size: 34rpx;
			font-weight: 500;
		}

		.line {
			width: 12rpx;
			height: 34rpx;
			background: #38d19a;
			border-radius: 3px;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				width: 700rpx;
				// height: 600rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
			}
		}


		.time {
			display: flex;
			flex-direction: column;
			align-items: center;

			.time_box {
				width: 700rpx;
				// height: 300rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
			}

		}

		.address {
			display: flex;
			flex-direction: column;
			align-items: center;

			.address_box {
				width: 700rpx;
				// height: 300rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
			}

		}

		.center {
			display: flex;
			flex-direction: column;
			align-items: center;

			.center_box {
				width: 700rpx;
				padding: 40rpx;
				background: #ffffff;
				border-radius: 14rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);

				.center_content {
					border-bottom: 0.5px solid #dadada;
				}

				.center_content:last-child {
					border-bottom: 0px solid #dadada;
					margin-bottom: 0 !important;
					padding-bottom: 0 !important;
				}

				.pro_name {
					font-size: 28rpx;
					color: #333333;
				}

				.pro_amout {
					font-size: 48rpx;
					color: #333333;
				}
			}
		}

		.pay {
			display: flex;
			flex-direction: column;
			align-items: center;

			.pay_box {
				width: 700rpx;
				padding: 40rpx;
			}

			button {
				display: inline-block;
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}

	.myPopup {
		// height: 600rpx;
		box-sizing: border-box;
		padding: 80rpx 60rpx 0 60rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-500;

		.title {
			font-size: 40rpx;
			color: #333333;
			font-weight: 500;
		}

		.content_item {
			font-size: 32rpx;
			color: #666666;
			font-weight: 400;
		}

		.mybutton button {
			width: 50%;
		}
	}
</style>